<!-- <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> -->
<html>

<head>

    <title>Document</title>
    <link rel="stylesheet" href="../css/employee.css">
</head>

<body>
    <header>
        <h2 style="line-height: 80px; margin-left: 50px;">员工管理</h2>
    </header>
    <main>
        <div class="main-center">
            <div class="submit">
                <input type="submit" value="+新增员工" id="add">
                <input type="submit" value="-删除员工" id="del">
            </div>
            <div class="table">
                <table width="90%">
                    <tr style="border: 2px solid rgb(243, 244, 249);">
                        <td>员工姓名</td>
                        <td>账号</td>
                        <td>手机号</td>
                        <td>账号状态</td>
                        <td>操作</td>
                    </tr>
                    <c:forEach var="employee" items="${employees}">
                        <tr style="border: 2px solid rgb(243, 244, 249);">
                            <td>${employee.name}</td>
                            <td>${employee.username}</td>
                            <td>${employee.phone}</td>
                            <td>${employee.status}</td>
                            <td>
                                <a href="../employee/selectById?id=${employee.id}" id="update">修改</a>
                                <a href="../employee/delete?id=${employee.id}">删除</a>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
        </div>
    </main>
    <div id="masking">
        <div class="operation">
            <div class="operation-header">
                <h2 style="padding: 20px;" id="test">新增员工</h2>
            </div>
            <div class="operation-main">
                <form action="../employee/addEmployee" method="post" target="a" id="myform">
                    <input type="text" name="id" value="${employee.id}" style="display: none;" id="employeeId">
                    <label for="">姓名</label>
                    <input type="text" name="name" value="${employee.name}" ><br>
                    <label for="">用户名</label>
                    <input type="text" name="username" value="${employee.username}"><br>
                    <label for="">密码</label>
                    <input type="text" name="password" value="${employee.password}"><br>
                    <label for="">手机号</label>
                    <input type="text" name="phone" value="${employee.phone}"><br>
                    <label for="">性别</label>
                    <input type="text" name="sex" value="${employee.sex}"><br>
                    <label for="">身份证号</label>
                    <input type="text" name="idNumber" value="${employee.idNumber}"><br>
                    <label for="">状态</label>
                    <input type="text" name="status" value="${employee.status}"><br>
                    <input type="submit">
                    <input type="button" id="cancel" value="取消">
                </form>
            </div>
        </div>
    </div>
    

</body>
<script>
    let masking = document.getElementById("masking");
    
    document.getElementById("add").onclick = function () {
        masking.style.display = "block";
    };
    document.getElementById("cancel").onclick = function () {
        masking.style.display = "none";
    };
    

    function update(){
        let employeeId = document.getElementById("employeeId").value;
        if(employeeId != ''){
            masking.style.display = "block";
            document.getElementById("test").innerHTML = "修改员工";
            document.getElementById("myform").action = "../employee/updateById?id=" + employeeId; 
        }
    }

    update();
</script>

</html>